<template>
  <div class="login">
    <div class="user-header">
      <input
        type="file"
        name="image"
        accept="image/*"
        @change="onchangeImgFun"
        class="header-upload-btn user-header-com"
      />
      <img alt="" :src="imgStr" class="user-header-img user-header-com" />
      <p class="tip">
        <span class="error">{{ errorStr }}</span>
      </p>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
        style="font-size:18px;"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        style="font-size:20px;"
      />
      <div class="zc">
        <a href="/regist" class="zcc"><img src="../../img/z.png" alt=""/></a>
        <a href="/mm" class="mm"><img src="../../img/w.png" alt=""/></a>
      </div>
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          style="background:red;border:0"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="san">
      <div class="wz">
        ———第三方登录———
      </div>
      <div class="hp">
        <a href="https://im.qq.com/"
          ><dl>
            <dt>
              <svg-icon iconClass="qq" font-size="25px"></svg-icon>
            </dt>
            <dd style="font-size:14px">
              QQ
            </dd>
          </dl></a
        >
        <dl>
          <dt>
            <svg-icon iconClass="wx" font-size="25px"></svg-icon>
          </dt>
          <dd style="font-size:14px">
            微信
          </dd>
        </dl>
        <dl>
          <dt>
            <svg-icon iconClass="wb" font-size="25px"></svg-icon>
          </dt>
          <dd style="font-size:14px">
            微博
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "HelloWorld",
  //   beforeRouteEnter (to, from, next) {
  //       if(window.sessionStorage.getItem('token')){
  //           next('/layout/home')
  //       }else{
  //           next()
  //       }
  //     // 在渲染该组件的对应路由被 confirm 前调用
  //     // 不！能！获取组件实例 `this`
  //     // 因为当守卫执行前，组件实例还没被创建
  //   },
  data() {
    return {
      imgStr: require("../../img/2.png"),
      errorStr: "",
      username: "",
      password: ""
    };
  },
  methods: {
    onchangeImgFun(e) {
      var file = e.target.files[0];
      console.log(file);
      // 获取图片的大小，做大小限制有用
      let imgSize = file.size;
      console.log(imgSize);
      var _this = this; // this指向问题，所以在外面先定义
      // 比如上传头像限制5M大小，这里获取的大小单位是b
      if (imgSize <= 50 * 1024) {
        // 合格
        _this.errorStr = "";
        console.log("大小合适");
        // 开始渲染选择的图片
        // 本地路径方法 1
        // this.imgStr = window.URL.createObjectURL(e.target.files[0])
        // console.log(window.URL.createObjectURL(e.target.files[0])) // 获取当前文件的信息

        // base64方法 2
        var reader = new FileReader();
        reader.readAsDataURL(file); // 读出 base64
        reader.onloadend = function() {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
          var dataURL = reader.result;
          console.log(dataURL);
          _this.imgStr = dataURL;
          // 下面逻辑处理
        };
      } else {
        console.log("大小不合适");
        _this.errorStr = "图片大小超出范围";
      }
    },
    onSubmit(values) {
      this.$api.login(values).then(res => {
        if (res.code === 1) {
          window.sessionStorage.setItem("user", JSON.stringify(res.data));
          window.sessionStorage.setItem(
            "token",
            JSON.stringify(res.data.token)
          );
          this.$router.push("/layout/home");
        } else {
          Toast.fail(res.message);
        }
      });
    }
  }
};
</script>


<style lang="scss">
@import "@css/style.scss";
* {
  box-sizing: border-box;
}
html,
body,
.login {
  width: 100%;
  height: 100%;
}

.user-header {
  padding-top: px2rem(50);
  width: 100%;
  height: px2rem(200);
  // margin-top:  px2rem(80);
  // margin-left:35%;

  img {
    display: block;
    display: table;
    margin: 0 auto;
  }
  // display: inline-block;
}
.van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width:58px;
    margin-right: 8px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
}
.user-header-com {
  width: px2rem(140);
  height: px2rem(140);
  border-radius: 50%;
  display: inline-block;
}
.header-upload-btn {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
}
.tip {
  font-size: px2rem(14);
  color: #666;
}
/* error是用于错误提示 */
.error {
  font-size: px2rem(13);
  color: tomato;
  margin-left: px2rem(10);
}
.zc {
  width: 100%;
  height: px2rem(60);
  display: flex;
  margin-top: px2rem(20);
  justify-content: space-between;
  .zcc {
    width: 35%;
    height: px2rem(20);
    margin-left:px2rem(20)
  }
  .mm {
    width: 17%;
    height: px2rem(30px);
    margin-right:px2rem(20)
  }
}
.san {
  width: 100%;
  height: px2rem(150);
  font-size: px2rem(16);
}
.wz {
  width: 100%;
  color: #ccc;
  text-align: center;
  height: px2rem(40);
  line-height: px2rem(40);
}
.hp {
  width: 60%;
  margin-left: 20%;
  height: px2rem(50);
  display: flex;
  margin-top:px2rem(15);
  justify-content: space-around;
}
.pt {
  width: 100%;
  height: px2rem(350);
  text-align: center;
  line-height: px2rem(350);
  font-size: px2rem(38);
}

.qh {
  margin-bottom: px2rem(50);
  margin-left: px2rem(20);
}
</style>

